<script setup>
import api from '../api/finishApi.js'
import { ref, onMounted, computed } from "vue"
import lodash from "lodash";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

// 获取路由对象
const router = useRouter();
//定义绑定的数据
//表格中的数据
const tableData = ref({});
const total=ref(0);
const editWinVisible = ref(false);
//查询数据
const searchObj = ref({
  current: 1,
  limit: 11,
  total: 0,
});

//要修改或者新增的数据
const obj = ref({});

// 页面加载后使用默认查询条件查询数据
onMounted(async () => {
  await searchStation();
})

// 查询车票的方法
const searchStation = async () => {
  tableData.value = await api.page(searchObj.value);
  console.log('查询车票条件:', searchObj.value)
  console.log('查询车票:', tableData.value)
  total.value = tableData.value.count;
}



//修改订单
const handleEdit = async(index, row) => {
  console.log(index, row)
  obj.value=lodash.clone(row);
  console.log('订单详情:', obj.value)
  editWinVisible.value=true;
}
//删除订单
const handleDelete = (index, row) => {
  console.log(index, row)
  ElMessageBox.confirm(
      '确认删除该行数据吗？',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await api.del(row.orderId);
        //重新加载数据
        searchObj.value.current = 1;
        await handleSearch();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

//前一页
const handleSizeChange=() => {
  searchStation();
}
//后一页
const handleCurrentChange=(val) => {
  searchStation();
}
//查询
const handleSearch=async () => {
  searchObj.value.current = 1;
  searchStation();
}
//取消修改操作
const editCancel = () => {
  obj.value = {};//清空数据
  editWinVisible.value = false;//关闭对话框
}
//提交修改操作
const submitEdit = () => {
  var edit = api.edit(obj.value);
  editWinVisible.value = false;//关闭对话框
  obj.value={};
  searchStation();
}

//定义方法
const search = ref('')
const filterTableData = computed(() =>
    tableData.value.data?.filter(
        (data) =>
            !search.value ||
            data.realName.toLowerCase().includes(search.value.toLowerCase())
    ) || []
)



const addWinVisible=ref( false);
//新增
const handleAdd=() => {
  obj.value = {}
  addWinVisible.value = true;
}
//取消新增操作
const addCancel = () => {
  obj.value = {};
  addWinVisible.value = false;//关闭对话框
}
//新增提交
const addCommit = async () => {
  await api.add(obj.value);
  searchObj.value.current = 1;
  searchStation();
  addWinVisible.value = false;//关闭对话框
}



</script>

<template>


    <!--搜索框-->
    <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 10px">
      <el-form-item label="乘客人姓名">
        <el-input v-model="searchObj.realName" placeholder="请输入乘客人姓名" clearable />
      </el-form-item>
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增订单</el-button>
        </el-form-item>
      </el-form>
    </el-form>





  <!-- 数据展示区域 -->
  <!-- 车票表格 -->
  <el-table :data="filterTableData" style="width: 100%; margin-top: 20px;">
    <el-table-column label="订单编号" prop="orderId"/>
    <el-table-column label="用户ID" prop="userId"/>
    <el-table-column label="班次ID" prop="scheduleId"/>
    <el-table-column label="乘客人姓名" prop="realName"/>
    <el-table-column label="乘客人身份证" prop="idCard"/>
    <el-table-column label="出发站" prop="fromStationName"/>
    <el-table-column label="到达站" prop="toStationName"/>
    <el-table-column label="出发时间" prop="departTime"/>
    <el-table-column label="到达时间" prop="arriveTime"/>
    <el-table-column label="票价" prop="totalAmount"/>
    <el-table-column label="列车编号" prop="trainNode"/>
    <el-table-column label="列车类型" prop="trainType"/>
    <el-table-column label="订单状态" prop="status"/>
    <el-table-column label="订单创建时间" prop="createTime"/>
    <el-table-column label="订单截止时间" prop="lockExpire"/>
    <el-table-column label="订单支付时间" prop="payTime"/>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
        >
          修改订单
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除订单
        </el-button>

      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[1, 2, 3, 4]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />


  <!-- 修改订单对话框表单 -->
  <el-dialog v-model="editWinVisible" title="修改订单" width="600">
    <el-form :model="obj" :rules="rules" ref="formRef" label-width="120px">
      <!-- 订单编号 -->
      <el-form-item label="订单编号" prop="orderId">
        <el-input v-model="obj.orderId" readonly />
      </el-form-item>

      <!-- 用户ID和班次ID在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户ID" prop="userId">
            <el-input v-model="obj.userId" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班次ID" prop="scheduleId">
            <el-input v-model="obj.scheduleId" readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 乘客人姓名和身份证在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="乘客人姓名" prop="realName">
            <el-input v-model="obj.realName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乘客人身份证" prop="idCard">
            <el-input v-model="obj.idCard" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 出发站和到达站在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="出发站" prop="fromStationName">
            <el-input v-model="obj.fromStationName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到达站" prop="toStationName">
            <el-input v-model="obj.toStationName" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 出发时间和到达时间在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="出发时间" prop="departTime">
            <el-date-picker
                v-model="obj.departTime"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择出发时间"
                style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到达时间" prop="arriveTime">
            <el-date-picker
                v-model="obj.arriveTime"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择到达时间"
                style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 票价和总历时在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="票价(元)" prop="totalAmount">
            <el-input v-model.number="obj.totalAmount" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总历时(分钟)" prop="durationMinutes">
            <el-input v-model.number="obj.durationMinutes" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 列车编号和列车类型在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="列车编号" prop="trainNode">
            <el-input v-model="obj.trainNode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="列车类型" prop="trainType">
            <el-select v-model="obj.trainType" placeholder="请选择列车类型" style="width: 100%">
              <el-option label="高铁" value="高铁" />
              <el-option label="动车" value="动车" />
              <el-option label="火车" value="火车" />
              <el-option label="地铁" value="地铁" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 订单状态 -->
      <el-form-item label="订单状态" prop="status">
        <el-select v-model="obj.status" placeholder="请选择订单状态" style="width: 100%">
          <el-option label="未支付" value="未支付" />
          <el-option label="已支付" value="已支付" />
          <el-option label="订单超时" value="订单超时" />
          <el-option label="取消订单" value="取消订单" />
        </el-select>
      </el-form-item>

      <!-- 订单创建时间和订单截止时间在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="订单创建时间" prop="createTime">
            <el-date-picker
                v-model="obj.createTime"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择创建时间"
                style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单截止时间" prop="lockExpire">
            <el-date-picker
                v-model="obj.lockExpire"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择截止时间"
                style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 订单支付时间 - 仅在已支付状态下显示且只有原订单有支付时间才能修改 -->
      <el-form-item label="订单支付时间" prop="payTime"
                    v-if="obj.status === '已支付' && obj.payTime">
        <el-date-picker
            v-model="obj.payTime"
            type="datetime"
            value-format="YYYY-MM-DDTHH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择支付时间"
            style="width: 100%" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="submitEdit">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <!--新增对话框-->
  <el-dialog v-model="addWinVisible" title="新增订单" width="600">
    <el-form :model="obj" :rules="rules" ref="addFormRef" label-width="120px">
      <el-form-item label="订单编号" prop="scheduleId">
        <el-input v-model="obj.orderId" />
      </el-form-item>
      <!-- 用户ID和班次ID在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户ID" prop="userId">
            <el-input v-model="obj.userId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班次ID" prop="scheduleId">
            <el-input v-model="obj.scheduleId" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 乘客人姓名和身份证在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="乘客人姓名" prop="realName">
            <el-input v-model="obj.realName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乘客人身份证" prop="idCard">
            <el-input v-model="obj.idCard" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 出发站和到达站在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="出发站" prop="fromStationName">
            <el-input v-model="obj.fromStationName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到达站" prop="toStationName">
            <el-input v-model="obj.toStationName" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 出发时间和到达时间在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="出发时间" prop="departTime">
            <el-date-picker
                v-model="obj.departTime"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择出发时间"
                style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到达时间" prop="arriveTime">
            <el-date-picker
                v-model="obj.arriveTime"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择到达时间"
                style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 票价和总历时在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="票价(元)" prop="totalAmount">
            <el-input v-model.number="obj.totalAmount" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总历时(分钟)" prop="durationMinutes">
            <el-input v-model.number="obj.durationMinutes" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 列车编号和列车类型在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="列车编号" prop="trainNode">
            <el-input v-model="obj.trainNode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="列车类型" prop="trainType">
            <el-select v-model="obj.trainType" placeholder="请选择列车类型" style="width: 100%">
              <el-option label="高铁" value="高铁" />
              <el-option label="动车" value="动车" />
              <el-option label="普通列车" value="普通列车" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 订单状态 -->
      <el-form-item label="订单状态" prop="status">
        <el-select v-model="obj.status" placeholder="请选择订单状态" style="width: 100%">
          <el-option label="未支付" value="未支付" />
          <el-option label="已支付" value="已支付" />
          <el-option label="取消订单" value="取消订单" />
          <el-option label="订单超时" value="订单超时" />
        </el-select>
      </el-form-item>

      <!-- 订单创建时间和订单截止时间在同一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="订单创建时间" prop="createTime">
            <el-date-picker
                v-model="obj.createTime"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择创建时间"
                style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单截止时间" prop="lockExpire">
            <el-date-picker
                v-model="obj.lockExpire"
                type="datetime"
                value-format="YYYY-MM-DDTHH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择截止时间"
                style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 订单支付时间 - 仅在已支付状态下显示 -->
      <el-form-item label="订单支付时间" prop="payTime" v-if="obj.status === '已支付'">
        <el-date-picker
            v-model="obj.payTime"
            type="datetime"
            value-format="YYYY-MM-DDTHH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择支付时间"
            style="width: 100%" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button type="primary" @click="addCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>







</template>










<style scoped>
.search-card {
  margin-bottom: 20px;
}

.no-data-container {
  text-align: center;
  padding: 40px 20px;
}

.no-data-image {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.no-data-text {
  font-size: 16px;
  color: #909399;
  margin: 0;
}




.toolbar {
  padding: 20px 0;
  text-align: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 20px;
}

.toolbar .el-button {
  font-size: 16px;
  padding: 12px 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.toolbar .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}




</style>
